<template>
  <a-modal
    :visible="visible"
    title="创建项目"
    okText="创建"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="$emit('change', false)"
  >
    <a-row :gutter="50">
      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.projectName"
          />
          <label>项目名称</label>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.projectDesc"
          />
          <label>项目描述</label>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="50">
      <a-col :span="12">
        <div class="form-check">
          <label
            ><a-tooltip placement="top">
              <template slot="title">
                <div>
                  <p>访问原型时提示输入密码！</p>
                  <p>不设置密码，会公开在网络中，存在数据丢失风险请谨慎！</p>
                </div>
              </template>
              <div class="label-help">
                设置密码 <a-icon class="icon" type="question-circle" />
              </div> </a-tooltip
          ></label>
          <input
            type="checkbox"
            v-model="formData.passType"
            class="form-switch"
            :true-value="1"
            :false-value="0"
            id="anime"
            name="hobby"
          />
        </div>
      </a-col>
      <a-col :span="12">
        <div class="form-input-material" v-if="formData.passType == 1">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.projectPassword"
          />
          <label>访问密码</label>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="50">
      <a-col :span="12">
        <div class="form-check">
          <label
            ><a-tooltip placement="top">
              <template slot="title">
                <p>仅公开在系统中，其他人也可以查看预览！</p>
              </template>
              <div class="label-help">
                是否公开 <a-icon class="icon" type="question-circle" />
              </div> </a-tooltip
          ></label>
          <input
            type="checkbox"
            v-model="formData.toOpen"
            class="form-switch"
            id="anime"
            name="hobby"
            :true-value="1"
            :false-value="0"
          />
        </div>
      </a-col>
    </a-row>
    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        @click="handleOk"
      >
        创建
      </a-button>
      <a-button key="back" @click="$emit('change', false)"> 取消 </a-button>
    </template>
  </a-modal>
</template>

<script>
import { createPrototypeItem } from "@/api/prototype.js";
export default {
  props: ["visible"],
  data() {
    return {
      loading: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      formData: {
        projectDesc: null, // 项目描述
        projectName: null, // 项目名称
        passType: 1, // 匿名访问 0 匿名  1 需要密码
        toOpen: 1 // 是否公开
      },
      rules: {
        projectName: [{ required: true, message: "请输入项目名称" }],
        projectPassword: [
          {
            required: true,
            message: "请输入访问地址"
          }
        ]
      }
    };
  },
  model: {
    prop: "visible",
    event: "change"
  },
  methods: {
    //   提交
    async handleOk() {
      const { projectName, projectDesc, passType, projectPassword } =
        this.formData;
      if (!projectName) {
        this.$notification.error({
          message: "请输入项目名称"
        });
        return;
      }

      if (passType && !projectPassword) {
        if (!projectName) {
          this.$notification.error({
            message: "请输入访问密码"
          });
          return;
        }
      }
      this.loading = true;
      try {
        const { code, msg } = await createPrototypeItem(this.formData);
        if (code === 200) {
          this.$notification.success({
            message: msg
          });
          this.$emit("change", false);
        }
      } catch (error) {
        console.log(error);
      }
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.label-help {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  .icon {
    margin: 0 5px;
  }
}
.form-input-material,
.form-check {
  margin: 20px 0 !important;
}
.form-check {
  label {
    margin-right: 10px;
  }
}
</style>
